﻿var time = parseInt(document.getElementsByClassName("minute_remain")[0].innerHTML) * 60; // đơn vị là giây
//var time = 300;
window.onload = function () { demlui(time) }
function demlui(time) {
    var phut = Math.floor(time / 60);
    var giay = 0;
    var timer = setInterval(function () {

        if (giay == 0) {
            if (phut == 0) {
                clearInterval(timer);
                //alert("Hết giờ làm bài, click OK để nộp bài :)");
                //window.location.href = "Result.aspx";
                var user_result = "";
                var get_result = document.getElementsByClassName("selections");
                var id = document.getElementById("id_test").innerHTML;
                var minute_remain = document.getElementById('test_time').innerHTML - document.getElementsByClassName('minute_remain')[1].innerHTML;
                for (var i = 0; i < get_result.length; i++) {
                    user_result += get_result[i].innerHTML + ",";
                }
                //var xhttp;
                //xhttp = new XMLHttpRequest();
                //xhttp.onreadystatechange = function () {
                //    if (xhttp.readyState == 4 && xhttp.status == 200) {
                //        alert("Hết thời gian làm bài, chúc bạn may mắn lần sau!");
                //        window.location = "Default.aspx";
                //    }
                //};
                //xhttp.open("GET", "../ajax/asp/submit.aspx?result=" + user_result, true);
                //xhttp.send();

                //alert(user_result);
                window.location = "../ajax/asp/submit.aspx?result=" + user_result + "&id=" + id + "&minute=" + minute_remain;
            } else {
                phut--;
                giay = 59;
            }
        }

        if (phut > 0) {
            var sophut = phut + ' phút';
        } else {
            var sophut = 0;
        }

        document.getElementById('demnguoc1').innerHTML = "<label class='minute_remain'>" + phut + "</label>" + ' Phút ' + giay + ' ' + 'Giây';
        document.getElementById('demnguoc2').innerHTML = "<label class='minute_remain'>" + phut + "</label>" + ' Phút ' + giay + ' ' + 'Giây';
        giay--;
    }, 1000);
}
$(document).ready(function () {
    $(".answers").click(function () {
        if ($(this).parent().hasClass("datraloi") && $(this).children("span").hasClass("selected w3-black w3-text-black")) {
            $(this).children("span").removeClass("selected w3-black w3-text-black");
            $(this).parent().children(".answers").children("span").removeClass("selected w3-black w3-text-black");
            $(this).parent().children(".thutu").removeClass("w3-black");
            $(this).parent().children(".thutu").addClass("w3-teal");
            $(this).parent().removeClass("datraloi");
            var sott = this.parentElement.getElementsByClassName("thutu")[0].innerHTML;
            var temp = document.getElementsByClassName(sott);
            var temp2 = document.getElementsByClassName("pa" + sott);
            for (var i = 0; i < temp.length; i++) {
                temp[i].setAttribute("class", sott);
            }
            for (var j = 0; j < temp2.length; j++) {
                temp2[j].setAttribute("class", "pa" + sott + " w3-hide-medium w3-hide-small");
                temp2[j].parentElement.getElementsByClassName("w3-hide")[0].setAttribute("class", "w3-hide");
            }
            var id = this.getElementsByClassName("selected")[0].innerHTML;
            document.getElementsByClassName(sott)[id - 1].setAttribute("class", sott);
            document.getElementsByClassName("pa" + sott)[id - 1].setAttribute("class", "pa" + sott + " w3-hide-medium w3-hide-small");
            document.getElementById(sott).setAttribute("class", "the-questions w3-row");

        }
        else if ($(this).parent().hasClass("datraloi")) {
            $(this).parent().children(".answers").children("span").removeClass("selected w3-black w3-text-black");
            $(this).children("span").addClass("selected w3-black w3-text-black");
            var sott = this.parentElement.getElementsByClassName("thutu")[0].innerHTML;
            var temp = document.getElementsByClassName(sott);
            var temp2 = document.getElementsByClassName("pa" + sott);
            for (var i = 0; i < temp.length; i++) {
                temp[i].setAttribute("class", sott);
            }
            for (var j = 0; j < temp2.length; j++) {
                temp2[j].setAttribute("class", "pa" + sott + " w3-hide-medium w3-hide-small");
                temp2[j].parentElement.getElementsByClassName("w3-hide")[0].setAttribute("class", "w3-hide");
            }
            var id = this.getElementsByClassName("selected")[0].innerHTML;
            document.getElementsByClassName(sott)[id - 1].setAttribute("class", sott + " selected w3-black w3-text-black");
            document.getElementsByClassName("pa" + sott)[id - 1].setAttribute("class", "pa" + sott + " w3-hide-medium w3-hide-small w3-text-teal indam");
            document.getElementsByClassName(sott)[id - 1].parentElement.parentElement.getElementsByClassName("w3-hide")[0].setAttribute("class", "selections w3-hide");
        }
        else {
            $(this).parent().addClass('datraloi');
            $(this).children("span").addClass("selected w3-black w3-text-black");
            $(this).parent().children(".thutu").addClass("w3-black");
            var sott = this.parentElement.getElementsByClassName("thutu")[0].innerHTML;
            var id = this.getElementsByClassName("selected")[0].innerHTML;
            document.getElementsByClassName(sott)[id - 1].setAttribute("class", sott + " selected w3-black w3-text-black");
            document.getElementsByClassName("pa" + sott)[id - 1].setAttribute("class", "pa" + sott + " w3-hide-medium w3-hide-small w3-text-teal indam");
            document.getElementById(sott).setAttribute("class", "the-questions w3-row datraloi");
            document.getElementsByClassName(sott)[id - 1].parentElement.parentElement.getElementsByClassName("w3-hide")[0].setAttribute("class", "selections w3-hide");
        }
    });
    $(".pa-res").click(function () {
        if ($(this).parent().parent().hasClass("datraloi") && $(this).children("span").hasClass("selected w3-black w3-text-black")) {
            $(this).parent().parent().removeClass("datraloi");
            $(this).parent().parent().children(".pa").children(".w3-hide").removeClass("selections");
            var id = this.getElementsByClassName("selected")[0].innerHTML;
            $(this).children("span").removeClass("selected w3-black w3-text-black");
            var sott = this.parentElement.parentElement.getElementsByClassName("thutu")[0].innerHTML;
            document.getElementsByClassName("cau")[sott].setAttribute("class", "cau w3-row");
            $(this).parent().children(".pa" + sott).removeClass("w3-text-teal");
            document.getElementById("c" + sott).getElementsByClassName("hinhtron")[id - 1].setAttribute("class", "hinhtron");
            document.getElementById("c" + sott).setAttribute("class", "cau w3-row");
            document.getElementById("c" + sott).getElementsByClassName("thutu")[0].setAttribute("class", "thutu w3-btn w3-teal w3-col l2 w3-large");
        }
        else if ($(this).parent().parent().hasClass("datraloi")) {
            $(this).parent().parent().children(".pa").children(".pa-res").children("span").removeClass("selected w3-black w3-text-black");
            $(this).parent().parent().children(".pa").children(".w3-hide").removeClass("selections");
            $(this).parent().children(".w3-hide").addClass("selections");
            $(this).children("span").addClass("selected w3-black w3-text-black");
            var sott = this.parentElement.parentElement.getElementsByClassName("thutu")[0].innerHTML;
            var id = this.getElementsByClassName("selected")[0].innerHTML;
            var temp = document.getElementById("c" + sott).getElementsByClassName("hinhtron");
            var temp2 = document.getElementsByClassName("pa" + sott);
            for (var i = 0; i < temp.length; i++) {
                temp[i].setAttribute("class", "hinhtron");
            }
            for (var j = 0; j < temp2.length; j++) {
                temp2[j].setAttribute("class", "pa" + sott + " w3-hide-medium w3-hide-small");

            }
            $(this).parent().children(".pa" + sott).addClass("w3-text-teal");

            document.getElementById("c" + sott).getElementsByClassName("hinhtron")[id - 1].setAttribute("class", "hinhtron selected w3-black w3-text-black");
            document.getElementById("c" + sott).setAttribute("class", "cau w3-row datraloi");
            document.getElementById("c" + sott).getElementsByClassName("thutu")[0].setAttribute("class", "thutu w3-btn w3-black w3-col l2 w3-large");
        }
        else {
            $(this).parent().parent().addClass('datraloi');
            $(this).children("span").addClass("selected w3-black w3-text-black");
            $(this).parent().children(".w3-hide").addClass("selections");
            var sott = this.parentElement.parentElement.getElementsByClassName("thutu")[0].innerHTML;
            var id = this.getElementsByClassName("selected")[0].innerHTML;
            $(this).parent().children(".pa" + sott).addClass("w3-text-teal");
            document.getElementById("c" + sott).getElementsByClassName("hinhtron")[id - 1].setAttribute("class", "hinhtron selected w3-black w3-text-black");
            document.getElementById("c" + sott).setAttribute("class", "cau w3-row datraloi");
            document.getElementById("c" + sott).getElementsByClassName("thutu")[0].setAttribute("class", "thutu w3-btn w3-black w3-col l2 w3-large");

        }
    });
});